<template>
    <div class="customer-file-fill-in">
        <c-title text=""></c-title>
        <div class="bg-linear"></div>
        <div class="info">
            <div class="img-box">

                <div class="error flex-a-c flex-j-c ">
                    <i class="iconfont icon-fontclass-rengezhongxin"></i>
                </div>
                <div class="img-box-right">
                    <div class="nick-name">{{ member.name }}</div>
                    <div class="tel">{{ member.mobile }}</div>
                </div>
            </div>
            <div class="edit" @click="goto">修改资料</div>
        </div>
        <div class="list">
            <div class="list-item" v-for="item in list" :key="item.id" @click="goto('edit', item.id)">
                <div class="flex-a-c">
                    <div class="iconfont-box">
                        <i class="iconfont icon-a-xiangmu1"></i>
                    </div>
                    <div class="wrapper">
                        <div class="project-name">{{ item.name }}</div>
                        <div class="time">{{ item.created_at }}</div>
                    </div>
                </div>
                <i class="iconfont icon-icon_more11"></i>
            </div>
        </div>
        <div class="button"  :class="{'w375': fun.isPc()}">
            <button @click="goto('add')"><van-icon name="plus" />添加项目</button>
        </div>
    </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';


export default {
    mixins: [scrollMixin],
    data() {
        return {
            page: 1,
            toatal_page: 1,
            isLoadMore: true,
            list: [],
            member: {}
        };
    },
    activated() {
        this.isLoadMore = true;
        this.getData();
        this.getDetail()
    },

    methods: {
        async getData(page = 1) {
            let { result, msg, data } = await $http.post('plugin.customer-archive.frontend.customer-archive.get-project-list', { customer_archive_id: this.$route.params.id, page }, '.');
            if (result) {
                this.list = page == 1 ? data.data : this.list.concat(data.data);
                this.page = data.current_page;
                this.total_page = data.last_page;

            } else {
                this.$toast(msg);
            }
        },
        async getDetail() {
            let { result, msg, data } = await $http.post('plugin.customer-archive.frontend.customer-archive.get-customer-info', { customer_archive_id: this.$route.params.id }, '.');
            if (result) {

                this.member = data;

            } else {
                this.$toast(msg);
            }
        },
        goto(type = '', id = '') {
            if (type == 'add') {
                this.$router.push(this.fun.getUrl("customer_life_project", { customer_archive_id: this.member.id }))
            } else if (type == 'edit') {
                this.$router.push(this.fun.getUrl("customer_life_project", { id }))
            } else {
                this.$router.push(this.fun.getUrl("customer_life_edit", { id: this.$route.params.id }))

            }
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.last_page) return;
            let page = this.page + 1;
            this.getData(page);
        }
    }
};
</script>

<style scoped lang='scss'>
.w375{
    width: 375px !important;
    left:50% !important;
    transform: translateX(-50%);
}
::v-deep .van-nav-bar .van-icon {

    color: #fff;
}

::v-deep .van-button--default {
    background-color: var(--themeBaseColor);

}

::v-deep .van-nav-bar {
    background-color: var(--themeBaseColor);
    border-bottom: var(--themeBaseColor);
}

.icon-a-xiangmu1:before {
    content: "\eccf";
}

.customer-file-fill-in {
    padding-bottom: 6.0938rem;


    position: relative;

    .error {
        width: 3.4375rem;
        height: 3.4375rem;
        background: #D4DEEC;
        border-radius: 50%;

        .iconfont {
            font-size: 2.0313rem;
            color: #fff;
        }

    }

    .iconfont-box {
        width: 3.4375rem;
        height: 3.4375rem;
        background: #D4DEEC;
        border-radius: .625rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
            font-size: 1.5rem;
        }
    }

    .img-box-right {
        margin-left: .5313rem;
    }

    .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .8125rem .75rem 1.1875rem 1.0625rem;
        box-sizing: border-box;
    }

    .edit {
        width: 4.75rem;
        height: 2rem;
        background: #FFFFFF;
        text-align: center;
        line-height: 2rem;
        color: var(--themeBaseColor);
        font-weight: 500;
        font-size: .875rem;
        border-radius: 1.0938rem 1.0938rem 1.0938rem 1.0938rem;
    }

    .img-box {
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .tel {
        font-weight: 400;
        font-size: .875rem;
        color: #FFFFFF;
        text-align: left;
    }

    .nick-name {
        font-weight: bold;
        font-size: 1rem;
        text-align: left;
        color: #FFFFFF;
        margin-bottom: .4375rem;
    }

    .bg-linear {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 11.25rem;
        background: linear-gradient(180deg, var(--themeBaseColor) 80%, #F5F5F5 100%);
        border-radius: 0rem 0rem 0rem 0rem;
        z-index: -1;
    }

    .list-item:first-child {
        margin-top: 0;
    }

    .icon-icon_more11 {
        color: #AAAAB3;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        margin-left: .4688rem;
        justify-content: space-between;
    }

    .project-name {
        text-align: left;
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
        margin-bottom: .6875rem;
    }

    .time {
        font-weight: 400;
        font-size: .8125rem;
        color: #6E6E79;
        line-height: 1;
        text-align: left;
    }

    .list-item {
        margin: .625rem .75rem;
        height: 4.6875rem;
        padding: .625rem;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: .5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            width: 3.4375rem;
            height: 3.4375rem;
            background: #D4DEEC;
            border-radius: .625rem .625rem .625rem .625rem;
            margin: 0;
        }
    }

    .button {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.75rem;
        display: flex;
        align-items: center;
        padding: 0 .75rem;
        background: #FFFFFF;
        box-shadow: 0rem -0.0313rem .3125rem .0313rem #F5F5F5;
        border-radius: 0rem 0rem 0rem 0rem;

        button {
            display: block;
            width: 100%;
            height: 2.5rem;
            background: var(--themeBaseColor);
            border-radius: 1.2813rem;
            font-weight: 500;
            font-size: .9375rem;
            color: #FFFFFF;
            border: none;
        }
    }

}

/** **/
</style>